<script lang="ts" setup>
import { message } from 'ant-design-vue';
import type { PropType } from 'vue';

// 获取父组件传递的数据
const props = defineProps({
  visible: {
    type: Boolean as PropType<boolean>,
  },
  getVisible: {
    type: Function as PropType<() => void>,
    required: true,
  },
});

// 表单
const formRef = ref();

const form = ref({
  sequenceNumber: 0,
  abbreviation: '',
  departmentName: '',
  publicKpiScore: 0,
  functionalWorkScore: 0,
  gsScore: 0,
  partyBranchIndex: 0,
  reverseSupportScore: 0,
});

const rules: any = {
  abbreviation: [{ required: true, message: '请输入部门简称', trigger: 'blur' }],
  departmentName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
  publicKpiScore: [
    { required: true, message: '请输入公共KPI指标成绩', trigger: 'blur' },
    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的公共KPI指标成绩', trigger: 'blur' },
  ],
  functionalWorkScore: [
    { required: true, message: '请输入职能工作考核成绩', trigger: 'blur' },
    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的职能工作考核成绩', trigger: 'blur' },
  ],
  gsScore: [
    { required: true, message: '请输入GS考核成绩', trigger: 'blur' },
    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的GS考核成绩', trigger: 'blur' },
  ],
  partyBranchIndex: [
    { required: true, message: '请输入党支部堡垒指数考核成绩', trigger: 'blur' },
    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的党支部堡垒指数考核成绩', trigger: 'blur' },
  ],
  reverseSupportScore: [
    { required: true, message: '请输入倒三角支撑成绩', trigger: 'blur' },
    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的倒三角支撑成绩', trigger: 'blur' },
  ],
};

// 重置
function resetForm() {
  message.success('重置成功!');
  formRef.value.resetFields();
}

// 取消
function onClose() {
  props.getVisible();
}

// 提交
async function onSubmit() {
  await formRef.value.validate();
  const monthItem = {
    abbreviation: form.value.abbreviation,
    departmentName: form.value.departmentName,
    publicKpiScore: 0,
    functionalWorkScore: 0,
    gsScore: 0,
    partyBranchIndex: 0,
    reverseSupportScore: 0,
    totalScore: 0,
    ranking: 0,
  };
  await getMonthCalculate(monthItem).then(() => {
    message.success('新增成功!');
    props.getVisible();
  });
}
</script>

<template>
  <div>
    <a-drawer
      title="新增月度绩效评分信息" :width="720" :visible="props.visible" :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="部门简称" name="abbreviation" prop="abbreviation">
              <a-input v-model:value="form.abbreviation" placeholder="请输入部门简称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="部门" name="departmentName" prop="departmentName">
              <a-input v-model:value="form.departmentName" placeholder="请输入部门名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="公共KPI指标" name="publicKpiScore" prop="publicKpiScore">
              <a-input v-model:value="form.publicKpiScore" style="width: 100%;" placeholder="请输入公共KPI指标" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="职能工作考核" name="functionalWorkScore" prop="functionalWorkScore">
              <a-input v-model:value="form.functionalWorkScore" style="width: 100%;" placeholder="请输入职能工作考核" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="GS考核" name="gsScore" prop="gsScore">
              <a-input v-model:value="form.gsScore" style="width: 100%;" placeholder="请输入GS考核" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="党支部堡垒指数考核" name="partyBranchIndex" prop="partyBranchIndex">
              <a-input v-model:value="form.partyBranchIndex" placeholder="请输入党支部堡垒指数考核" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="倒三角支撑" name="reverseSupportScore" prop="reverseSupportScore">
              <a-input v-model:value="form.reverseSupportScore" placeholder="请输入倒三角支撑" />
            </a-form-item>
          </a-col>
        </a-row> -->
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button style="margin-right: 8px;" @click="onClose">
          取消
        </a-button>
        <a-button style="margin-right: 8px;" @click="resetForm">
          重置
        </a-button>
        <a-button type="primary" @click="onSubmit">
          提交
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
